<template>
    <div>
        <a href="/Add">XINZENG</a>
        <table class="table">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>图片</td>
                    <td>日期</td>
                    <td>编号</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in date">
                    <td>{{ a.memberId }}</td>
                    <td>{{ a.memberName }}</td>
                    <td><img :src="'https://localhost:7201/'+a.img" width="60px" height="60px"></td>
                    <td>{{ moment(a.creates).format("YYYY-MM-DD") }}</td>
                    <td>{{ a.memberLevelName }}</td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fanye(1)">
        <input type="button" value="上一页" @click="fanye(2)">
        <input type="button" v-for="c in zys.row" :value="c" @click="yeye(c)">
        <input type="button" value="下一页" @click="fanye(3)">
        <input type="button" value="尾页" @click="fanye(4)">
        当前第{{ ts.index }}页 共{{ zys.list }}条 每页{{ zys.row }}条 共{{ ts.size }}页
        <input type="number" v-model="ts.index">
        <input type="button" value="跳转" @click="tiao()">
        <select v-model="ts.size" @click="yy">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
onMounted(()=>{
    show()
})
const yeye=(val:any)=>{
    ts.value.index=val
    show()
}
const yy=()=>{
    show()
}
const tiao=()=>{
    show()
}
const fanye=(val:any)=>{
    if(val==1){
        ts.value.index=1
        show()
    }
    if(val==2){
        if(ts.value.index>1){
            ts.value.index-=1
            show()
        }
    }
    if(val==3){
        if(ts.value.index<zys.value.row){
            ts.value.index+=1
            show()
        }
    }
    if(val==4){
        ts.value.index=zys.value.row
        show()
    }
}
const ts=ref({
    index:1,
    size:2
})
const zys=ref({
    list:0,
    row:0
})
const show=()=>{
    axios.get("https://localhost:7201/api/Member/Show",{params:ts.value}).then(res=>{
        date.value=res.data.row

        zys.value.list=res.data.list,
        zys.value.row=Math.ceil(res.data.list/ts.value.size)
    })
}
const date=ref([{
  "memberId": 0,
  "memberName": "",
  "img": "",
  "memberLevelId": 0,
  "memberLevelName":"",
  "creates": ""
}])
</script>

<style scoped>

</style>